<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			// 1 创建类式组件
		class MyComponent extends React.Component {//myComponent继承了React.Component类
			
			state={
				num:200,
			}
			reduce=()=>{
				const {num} = this.state
				this.setState({
					num:num -1
				})
				console.log(this.state.num)
			}
			componentDidMount(){
				console.log('componentDidMount')
			} 
			render() {
				console.log('render')
				return (
						<button onClick={this.reduce}>提交</button>
				)
			}
		}

		// 渲染虚拟DOM到页面
		ReactDOM.render(<MyComponent />, document.getElementById('test'))
	</script>

	</body>

</html>
